<template>
  <!-- 标的要素 -->
  <div class="pb-[15px] px-[15px] text-[14px]">
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="bx_id == 2">
      <van-field
        :disabled="true"
        label-class="label"
        name="工程类别"
        label="工程类别"
        v-model="Info.classify"
      />
    </div>
    <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="bx_id == 2 || bx_id == 7 || bx_id == 19 || bx_id == 24"
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.name"
        name="项目名称"
        label="项目名称"
        placeholder="请输入项目名称"
        :rules="[{ required: true, message: '请输入项目名称' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="bx_id == 7">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.price"
        name="工程造价"
        label="工程造价"
        placeholder="请输入工程造价"
        :rules="[{ required: true, message: '请输入工程造价' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="bx_id == 19">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.price"
        name="设备造价"
        label="设备造价"
        placeholder="请输入工程造价"
        :rules="[{ required: true, message: '请输入工程造价' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="false">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.code"
        name="项目编号"
        label="项目编号"
        placeholder="请输入项目编号"
        :rules="[{ required: true, message: '请输入项目编号' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="bx_id == 8 || bx_id == 22">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.area_num"
        name="项目面积"
        label="项目面积"
      />
    </div>
    <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="
        bx_id == 8 ||
        bx_id == 2 ||
        bx_id == 7 ||
        bx_id == 19 ||
        bx_id == 20 ||
        bx_id == 22 ||
        bx_id == 24
      "
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.address"
        name="工地地址"
        label="工地地址"
        placeholder="请输入工地地址"
        :rules="[{ required: true, message: '请输入工地地址' }]"
      />
    </div>
    <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="
        bx_id == 8 ||
        bx_id == 7 ||
        bx_id == 19 ||
        bx_id == 20 ||
        bx_id == 22 ||
        bx_id == 24
      "
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.address"
        name="施工详细地址"
        label="施工详细地址"
        placeholder="请输入施工详细地址"
        :rules="[{ required: true, message: '请输入施工详细地址' }]"
      />
    </div>
    <div v-if="bx_id == 8" class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">活动类型</div>
      <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop(3)">
        <div class="text-[#c8c9cc] text-[14px]">
          {{ Info.active_type ? Info.active_type : "请选择活动类型" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>
    <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="bx_id == 8 || bx_id == 7 || bx_id == 19 || bx_id == 22"
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.room_no"
        name="铺位号"
        label="铺位号"
        placeholder="请输入铺位号、具体点位或店铺名称"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="bx_id == 2">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.num"
        name="人员人数"
        label="人员人数"
        placeholder="请输入人员人数"
        :rules="[{ required: true, message: '请输入人员人数' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="bx_id == 2">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.age"
        name="工期"
        label="工期"
        placeholder="请选择工期"
        :rules="[{ required: true, message: '请选择工期' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="bx_id == 2">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.room_no"
        name="铺位号"
        label="铺位号"
        placeholder="请输入铺位号、具体点位或店铺名称"
      />
    </div>
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">开始时间</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPop(1)"
      >
        <div class="text-[14px]" :class="edit ? '' : 'text-[#c8c9cc]'">
          {{ Info.start_date ? Info.start_date : "请选择开始时间" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">结束时间</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPop(2)"
      >
        <div class="text-[14px]" :class="edit ? '' : 'text-[#c8c9cc]'">
          {{ Info.end_date ? Info.end_date : "请选择结束时间" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="route.query.id == '2'"
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.structure"
        name="房屋建筑结构"
        label="房屋建筑结构"
        placeholder="请输入房屋建筑结构"
        :rules="[{ required: true, message: '请输入房屋建筑结构' }]"
      />
    </div> -->
    <!-- <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="route.query.id == '2'"
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.area_num"
        name="施工面积"
        label="施工面积"
        placeholder="请输入施工面积"
        :rules="[{ required: true, message: '请输入施工面积' }]"
      />
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">项目所在地</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPop"
      >
        <div class="text-[#c8c9cc] text-[14px]">
          {{ addressName ? addressName : "请选择项目所在地" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">详细施工地址</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPicker('详细施工地址')"
      >
        <div class="text-[#c8c9cc] text-[14px]">
          {{ Info.address ? Info.address : "请选择详细施工地址" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.room_no"
        name="商铺号/房间号"
        label="商铺号/房间号"
        placeholder="请输入商铺号/房间号"
        :rules="[{ required: true, message: '请输入商铺号/房间号' }]"
      />
    </div> -->
    <!-- <div class="py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">保障方案</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPicker('保障方案')"
      >
        <div class="text-[#c8c9cc] text-[14px]">
          {{ name ? name : "请选择" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="text-[12px] py-[15px]">
      注：本方案
      <span class="text-[#F00505]">不承保黑龙江、吉林、辽宁、河南</span>
      等四省所在区域的工程
    </div> -->
  </div>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <van-picker
        :title="popTitle"
        :columns="columns"
        :columns-field-names="{ text: 'name', value: 'id' }"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
  <div>
    <van-popup v-model:show="isPopup" position="bottom" round :style="{ height: '40%' }">
      <van-date-picker title="选择日期" v-model="currentDate" @confirm="confirmBtn" />
      <!-- <van-area
        title="选择地址"
        :area-list="areaList"
        value=""
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="confirmBtn"
      /> -->
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, defineProps, watchEffect, defineExpose, computed } from "vue";
import { homeGetAddress } from "@/utils/api";
// import { useRoute } from "vue-router";

const props = defineProps({
  Info: { type: Object },
  edit: { type: Boolean },
  bx_id: { type: Number },
});
const currentDate = computed(() => {
  return getDate();
});
const dateIndex = ref<number>();

// const route = useRoute();
const Info = reactive<treetopType>({
  name: "",
  address: "",
  age: "",
  code: "",
  start_date: "",
  end_date: "",
  classify: "室内装修",
  num: "",
  price: "",
  area_num: "",
  province: "",
  city: "",
  area: "",
  province_code: "",
  city_code: "",
  area_code: "",
  active_type: "",
  room_no: "",
});
const isPopup = ref(false);
const popTitle = ref("");
const columns = ref([] as any);
const show = ref(false);
const name = ref<string>("");
const addressList = ref([]);
const addressName = ref(""); //项目所在地
//获取当前时间
const getDate = () => {
  let date = new Date();
  let year = date.getFullYear(); //获取完整的年份(4位)
  let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  let strDate = date.getDate(); // 获取当前日(1-31)

  let data = [`${year}`, `${month}`, `${strDate}`];

  return data;
};
getDate();
watchEffect(() => {
  if (props?.Info?.treetop !== undefined) {
    let key: keyof treetopType;
    for (key in Info) {
      Info[key] = props?.Info?.treetop[key];
    }
    Info.classify = "室内装修";

    name.value = props?.Info?.treetop.fanan as string;

    addressName.value =
      props?.Info?.treetop.province +
      "-" +
      props?.Info?.treetop.city +
      "-" +
      props?.Info?.treetop.area;
  }
});
//获取详细地址
const getAddress = async () => {
  const res = await homeGetAddress("");
  addressList.value = res.msg;
};
getAddress();
const onConfirm = (selectedValues: any) => {
  if (popTitle.value == "保障方案") {
    name.value = selectedValues.selectedOptions[0].name;
    Info.fanan = selectedValues.selectedOptions[0].name;
  } else {
    Info.address = selectedValues.selectedOptions[0].name;
    Info.address_id = selectedValues.selectedOptions[0].id;
  }

  show.value = false;
};
//打开弹框
// const openPicker = (title: string) => {
//   if (!props.edit) return;
//   popTitle.value = title;
//   columns.value = [];
//   if (title == "保障方案") {
//     bzFun();
//   } else {
//     addressList.value.forEach((item: any) => {
//       let param = {
//         name: item.address,
//         id: item.id,
//       };
//       columns.value.push(param);
//     });
//     console.log(columns.value);
//   }
//   show.value = true;
// };
//保障方案数组的获取
// const bzFun = () => {
//   if (route.query.order_id) {
//     //回显数据const
//     props?.Info?.bx_info?.fanan.forEach((item: any) => {
//       let param = {
//         name: item.name,
//         id: item.name,
//       };
//       columns.value.push(param);
//     });
//   } else {
//     props?.Info?.fanan.forEach((item: any) => {
//       let param = {
//         name: item.name,
//         id: item.name,
//       };
//       columns.value.push(param);
//     });
//   }
// };
const confirmBtn = (res: any, _: number) => {
  // console.log(res, index);
  if (dateIndex.value == 1) {
    // 开始时间
    Info.start_date =
      res.selectedOptions[0].text +
      "-" +
      res.selectedOptions[1].text +
      "-" +
      res.selectedOptions[2].text;
  } else {
    // 结束时间
    Info.end_date =
      res.selectedOptions[0].text +
      "-" +
      res.selectedOptions[1].text +
      "-" +
      res.selectedOptions[2].text;
  }

  // Info.province = res.selectedOptions[0].text;
  // Info.city = res.selectedOptions[1].text;
  // Info.area = res.selectedOptions[2].text;
  isPopup.value = false;
};
//打开项目所在地
const openPop = (index: number) => {
  //1是开始时间 2是结束时间
  dateIndex.value = index;
  if (!props.edit) return;
  isPopup.value = true;
};
defineExpose({
  Info,
});
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 14px !important;
}
:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
}
:deep(.label) {
  color: black !important;
}
</style>
